<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:41
-->
<!-- html代码 -->
<template>
  <div>
      <div ref="c222" style="height: 250px;margin-top: 15px;"></div>
  </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request'
import moment from 'moment';
import { mapState } from 'vuex';
export default {
  data() {
      return {
          title: '实时湿度曲线',
          params: {
              page: 1,
              pageSize: 51,
          },
          humiData: [],
          noiseData: [],
          dualAxesInstance: null,
      };
  },
  computed: {
      ...mapState(['ed'])
  },
  watch: {
      ed: {
          handler(n) {
              this.params.device_id = n.device_id;
              this.params.engineer_id = n.engineer_id;
              Promise.all([this.getHumData(), this.getNoiseData()])
              this.dualAxesInstance.changeData([
                  this.humiData,
                  this.noiseData
              ]);
          },
          deep: true
      }
  },
  methods: {
      loadDualAxes() {
          this.dualAxesInstance = new DualAxes(this.$refs.c222, {
              data: [this.humiData, this.noiseData],
              xField: 'insert_time',
              yField: ['humidity', 'noise'],
              xAxis: {
                  label: {
                      style: {
                          fill: 'grey'
                      }
                  }
              },
              yAxis: {
                  'humidity': {
                      label: {
                          style: {
                              fill: 'grey'
                          }
                      }
                  },
                  'noise': {
                      label: {
                          style: {
                              fill: 'grey'
                          }
                      }
                  }
              },
              legend: {
                  position:'top',
                  itemName: {
                      formatter: (text) => text, 
                      style: (text) => ({ fill: 'grey' })
                  }
              },
              geometryOptions: [
                  {
                      geometry: 'line',
                      color: '#d07f7a',
                  },
                  {
                      geometry: 'line',
                      color: '#a2a6ec',
                  },
              ],
              animation: {
                  appear: {
                      animation: 'wave-in',
                      duration: 5000,
                  },
              },
              tooltip: {
                  domStyles: {
                      "g2-tooltip": {
                          backgroundColor: '#147',
                          color: 'grey',
                          fontSize: 20
                      }
                  }
              },
          });
          this.dualAxesInstance.render();
      },
      async getHumData() {
          let res = await get('/dashboard/pageQueryTodayData', { ...this.params, type: 'humidity' });
          console.log(res, '湿度响应');
          res.data.list.forEach(function (item, index, arr) {
              arr[0].humidity = 50;
              item.insert_time = moment(item.insert_time).format('HH:mm');
          });
          let humi = [];
          res.data.list.forEach((item, index, arr) => {
              if (index % 10 == 0) {
                  humi.push(arr[index])
              }
          })
          this.humiData = humi;
      },
      async getNoiseData() {
          let res = await get('/dashboard/pageQueryTodayData', { ...this.params, type: 'noise' });
          console.log(res, '噪声响应');
          res.data.list.forEach(function (item, index, arr) {
              arr[0].noise = 20;
              item.insert_time = moment(item.insert_time).format('HH:mm');
          });
          let noi = [];
          res.data.list.forEach((item, index, arr) => {
              if (index % 10 == 0) {
                  noi.push(arr[index])
              }
          })
          this.noiseData = noi;
      },
  },
  async mounted() {
      // 并发获取数据
      await Promise.all([this.getHumData(), this.getNoiseData()]);
      this.loadDualAxes();
  },
};
</script>
<!-- css代码 -->
<style lang="less" scoped>

</style>